<script>
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import debounce from '@/sheep/helper/debounce';
  import sheep from '@/sheep';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  export default {
    name: 's-apply-family-invitation',
    methods: {
      debounce,
      async agreeToJoin() {
        if (!this.isLogin) {
          showAuthModal();
          return;
        }
        let { code, msg } = await sheep.$api.family.agreeJoinFamily({
          family_id: this.list.family_id,
        });
        this.$refs.applyForFamilyMembership.close();
        if (code == 1) {
          this.$emit('agreeToJoin');
        } else {
          sheep.$helper.toast(msg);
        }
      },
      async agreeToJoinGenealogy() {
        if (!this.isLogin) {
          showAuthModal();
          return;
        }
        let { code, msg } = await sheep.$api.genealogy.agreeJoinGenealogy({
          genealogy_id: this.list.genealogy_id,
        });
        this.$refs.applyForFamilyMembership.close();
        if (code == 1) {
          this.$emit('agreeToJoin');
        } else {
          sheep.$helper.toast(msg);
        }
      },
      closeJoin(index) {
        this.$refs.applyForFamilyMembership.close();
      },
    },
    components: { ImageAvater },
    data() {
      return {
        familyInfo: {},
        genealogyInfo: {},
        userInfo: {},
      };
    },
    props: {
      // 申请加入家庭列表
      list: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      isLogin() {
        return sheep.$store('user').isLogin;
      },
    },
    // watch: {
    //   list: {
    //     deep: true,
    //     async handler(newVal, oldVal) {
    //       console.log(newVal, '监听');
    //       if (!!newVal.family_id) {
    //         // 获取家庭详情
    //         const { data } = await sheep.$api.family.getFamilyCulture({ family_id: newVal.family_id });
    //         this.familyInfo = data;
    //         const res = await sheep.$api.user.getUserInfo({ id: newVal.uid });
    //         this.userInfo = res.data;
    //         this.$nextTick(()=>{
    //           this.$refs.applyForFamilyMembership.open();
    //         })
    //       }
    //       if (!!newVal.genealogy_id) {
    //         const { data } = await sheep.$api.genealogy.getGenealogyInfo({ genealogy_id: newVal.genealogy_id });
    //         this.genealogyInfo = data;
    //         const res = await sheep.$api.user.getUserInfo({ id: newVal.uid });
    //         this.userInfo = res.data;
    //         this.$nextTick(()=>{
    //           this.$refs.applyForFamilyMembership.open();
    //         })
    //       }
    //     },
    //     immediate: true,
    //   },
    // },
    mounted() {
      this.$nextTick(async () => {
        if (!!this.list.family_id || !!this.list.genealogy_id) {
          if (!!this.list.family_id) {
            // 获取家庭详情
            const { data } = await sheep.$api.family.getFamilyCulture({ family_id: Number(this.list.family_id) });
            this.familyInfo = data;
            const res = await sheep.$api.user.getUserInfo({ id: this.list.uid });
            this.userInfo = res.data;
          }
          if (!!this.list.genealogy_id) {
            const { data } = await sheep.$api.genealogy.getGenealogyInfo({ genealogy_id: this.list.genealogy_id });
            this.genealogyInfo = data;
            const res = await sheep.$api.user.getUserInfo({ id: this.list.uid });
            this.userInfo = res.data;
          }
          this.$refs.applyForFamilyMembership.open();
        }
      });
    },
  };
</script>

<template>
  <view class="applyForFamilyMembership">
    <uni-popup ref="applyForFamilyMembership" :mask-click="false">
      <!-- 邀请加入家庭 -->
      <view class="family_info" v-if="list.type == 'family' && familyInfo">
        <view class="top" style="overflow: hidden">
          <view class="title mt_35 ml_24 mr_24">
            邀请加入家庭
          </view>
          <view class="hW_30"></view>
          <view class="flex align-center ml_24 mr_24">
            <view class="name style">{{ familyInfo.name || '' }}</view>
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24">
            家庭号 {{ familyInfo.family_id }}
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24 mb_35">
            家庭人数 {{ familyInfo.real_member_count }}
          </view>
          <image-avater :src="!!userInfo.avatar && userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"
                        width="152" height="152"
                        class="imageAvater"></image-avater>
        </view>
        <view class="bottom">
          <view class="text mt_36 ml_25 mr_25 flex align-center">
            <view>{{ `${userInfo.nickname}邀请你加入` }}</view>
            <view class="color_FF4206">{{ familyInfo.name }}</view>
          </view>
          <view class="hW_35"></view>
          <view class="mb_36 ml_25 mr_25 flex align-center justify-between">
            <view class="confirm flex align-center justify-center"
                  @click.stop="debounce(agreeToJoin(),1000,true)">
              同意
            </view>
            <view class="cancel flex align-center justify-center" @click.stop="debounce(closeJoin(index),1000,true)">
              取消
            </view>
          </view>
        </view>
      </view>

      <view class="genealogy_info" v-if="list.type == 'genealogy'">
        <view class="top" style="overflow: hidden">
          <view class="title  mt_35 ml_24 mr_24">
            邀请加入家谱
          </view>
          <view class="hW_30"></view>
          <view class="flex align-center ml_24 mr_24">
            <view class="name style ">{{ genealogyInfo.title }}</view>
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24">
            发起人: {{ genealogyInfo.username }}
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24 mb_35">
            {{ genealogyInfo.remark }}
          </view>
          <image-avater
            :src="!!userInfo.avatar && userInfo.avatar.indexOf('http') != -1  ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"
            width="152" height="152"
            class="imageAvater"></image-avater>
        </view>
        <view class="bottom">
          <view class="text mt_36 ml_25 mr_25 flex align-center">
            <view>{{ `${userInfo.nickname}邀请你加入` }}</view>
            <view class="color_FF4206">{{ genealogyInfo.title }}</view>
          </view>
          <view class="hW_35"></view>
          <view class="mb_36 ml_25 mr_25 flex items-center justify-between">
            <view class="confirm flex align-center justify-center"
                  @click.stop="debounce(agreeToJoinGenealogy(),1000,true)">
              同意
            </view>
            <view class="cancel flex align-center justify-center"
                  @click.stop="debounce(closeJoin(),1000,true)">
              取消
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
  .family_info {
    width: 548rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;

    .top {
      width: 548rpx;
      background: #FF7950;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      position: relative;

      .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 37rpx;
        color: #FFFFFF;
      }

      .style {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .imageAvater {
        position: absolute;
        top: 22rpx;
        right: 23rpx;
      }
    }

    .bottom {
      width: 548rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;

      .text {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 26rpx;
        color: #696969;
      }

      .confirm {
        width: 205rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .cancel {
        width: 206rpx;
        height: 80rpx;
        background: #A0A0A0;
        border-radius: 57rpx 57rpx 57rpx 57rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .genealogy_info {
    width: 548rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;

    .top {
      width: 548rpx;
      background: #234B7C;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      position: relative;

      .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 37rpx;
        color: #FFFFFF;
      }

      .style {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .imageAvater {
        position: absolute;
        top: 22rpx;
        right: 23rpx;
      }
    }

    .bottom {
      width: 548rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;

      .text {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 26rpx;
        color: #696969;
      }

      .confirm {
        width: 205rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .cancel {
        width: 206rpx;
        height: 80rpx;
        background: #A0A0A0;
        border-radius: 57rpx 57rpx 57rpx 57rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .joinWarn {
    width: 548rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 35rpx 24rpx;

    .title {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 36rpx;
      color: #696969;
      line-height: 0rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 36rpx;
      color: #696969;
    }

    .confirm {
      width: 205rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .day {
    width: 548rpx;
    padding: 114rpx 24rpx 50rpx 24rpx;
    background: url($uni-bg-url + "/birthdayMessage_bg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx;
    position: relative;

    .icon {
      position: absolute;
      top: -160rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 346rpx;
      height: 265rpx;
    }

    .title {
      width: 353rpx;
      height: 70rpx;
      background: #FFFFFF;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      border: 2rpx solid #FF4206;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 37rpx;
      color: #FF4206;
    }

    .content {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #50010D;
    }

    .time {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #50010D;
    }

    .description {
      width: 280rpx;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      .style {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18rpx;
        color: #F15927;
      }

      .days {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 109rpx;
        color: #FF4206;
      }
    }

    .confirm {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      border: 2rpx solid #707070;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .memorialDay {
    width: 548rpx;
    padding: 114rpx 24rpx 50rpx 24rpx;
    background: url($uni-bg-url + "/memorialDay_bg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx;
    position: relative;

    .icon {
      position: absolute;
      top: -160rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 346rpx;
      height: 265rpx;
    }

    .title {
      width: 353rpx;
      height: 70rpx;
      background: #FFFFFF;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      border: 2rpx solid #FF4206;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 37rpx;
      color: #FF4206;
    }

    .content {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #50010D;
    }

    .time {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #50010D;
    }

    .description {
      width: 280rpx;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      .style {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18rpx;
        color: #F15927;
      }

      .days {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 109rpx;
        color: #FF4206;
      }
    }

    .confirm {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      border: 2rpx solid #707070;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>